<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

		<title>semantic</title>
		  <!--- Site CSS -->
  <link rel="stylesheet" type="text/css" href="components/reset.css">
  <link rel="stylesheet" type="text/css" href="components/site.css">
  <link rel="stylesheet" type="text/css" href="components/grid.css">

  <!--- Component CSS -->
 
  <link rel="stylesheet" type="text/css" href="components/table.css">
  <link rel="stylesheet" type="text/css" href="components/menu.css">
  <link rel="stylesheet" type="text/css" href="components/input.css">
  <link rel="stylesheet" type="text/css" href="components/dropdown.css">
  <link rel="stylesheet" type="text/css" href="components/icon.css">
  <link rel="stylesheet" type="text/css" href="components/button.css">
  <link rel="stylesheet" type="text/css" href="components/transition.css">
  <link type="text/css" rel="stylesheet" href="http://cdn.staticfile.org/twitter-bootstrap/3.1.1/css/bootstrap.min.css"/>
  <!--- Example Libs -->
  <link rel="stylesheet" type="text/css" href="components/popup.css">
  <script src="js/jquery-3.3.1.min.js"></script>
  <script src="../assets/library/iframe-content.js"></script>
  <script src="../assets/show-examples.js"></script>
  <script type="text/javascript" src="components/popup.js"></script>

  <!--- Component JS -->
  <script type="text/javascript" src="components/transition.js"></script>
  <script type="text/javascript" src="components/dropdown.js"></script>
  <script type="text/javascript" src="js/jqPaginator.js"></script>
	</head>
	<style type="text/css">
		body{font-family:Lato,"Segoe UI","Microsoft YaHei",Arial,Helvetica,sans-serif!important}
		.ui.mini.image{height:40px}
		.tablecontainer{padding-left:100px}
		.ui.secondary.menu{padding:0px 100px;border-bottom:1px solid #DDD;box-shadow:0 2px 3px rgba(0,0,0,.04)}
		.item{font-size: 14px}
		.welcome{margin:20px;font-size: 14px;}
	</style>
	<body>
	<div class="ui secondary menu">
	
  <div class="header item"><img class="ui mini image" src="img/brand.png"></div>
  <a class="active item">首页</a>
  <a class="item">跟进</a>
  <div class="ui dropdown item">
    菜单
    <i class="dropdown icon"></i>
    <div class="menu">
      <div class="item">Action</div>
      <div class="item">Another Action</div>
      <div class="item">Something else here</div>
      <div class="divider"></div>
      <div class="item">Separated Link</div>
      <div class="divider"></div>
      <div class="item">One more separated link</div>
    </div>
  </div>
  <div class="right menu">
    <div class="item">
      <div class="ui action left icon input">
        <i class="search icon"></i>
        <input type="text" placeholder="Search">
        <button class="ui button">搜索</button>
      </div>
    </div>
    <p class="welcome">欢迎***！</p>
    <a class="item">注销</a>
  </div>
</div>


<div class="tablecontainer">
	<h4 style="font-family: '微软雅黑';">学生列表:</h4>
<div class="ui two column relaxed grid">
<div class="column">
    <table class="ui celled selectable right aligned table">
      <thead>
        <th class="left aligned">姓名</th>
        <th>宿舍</th>
        <th>录入时间</th>
        <th>记录人</th>
        <th>操作</th>
      </thead>
      <tbody class="list">
      </tbody>
    </table>
 </div>
 </div>
 <ul class="pagination" id="pagination"></ul>
</div> 
 


</body>
<script>
  $(document)
    .ready(function() {
      $('.ui.menu .ui.dropdown').dropdown({
        on: 'hover'
      });
      $('.ui.menu a.item')
        .on('click', function() {
          $(this)
            .addClass('active')
            .siblings()
            .removeClass('active')
          ;
        })
      ;
    })
  ;
</script>
<script type="text/javascript">
	$(function() { 
    var ptotal; // 总共多少页  
    Init(1); // 注意参数，初始页面默认传到后台的参数
    $.jqPaginator('#pagination', {
        totalPages: ptotal,
        visiblePages: 8,
        currentPage: 1,
		first:'<li class="first"><a href="javascript:;">首页</a></li>',
        prev: '<li class="prev"><a href="javascript:;">上一页</a></li>',
        next: '<li class="next"><a href="javascript:;">下一页</a></li>',
        last:'<li class="first"><a href="javascript:;">尾页</a></li>',
        page: '<li class="page"><a href="javascript:;">{{page}}</a></li>',
        
        onPageChange: function (num, type) {
            $('#p2').text(type + '：' + num);
            Init(num);  
        }
    });
    //点击上一页、下一页、页码的时候触发的事件  
   // function PageCallback(index, jq) { // 前一个参数表示当前点击的那个分页的页数索引值，后一个参数表示装载容器。  
        //Init(index);  
        
    //}  
    function Init(pageIndex) { // 参数就是点击的那个分页的页数索引值  
        $.ajax({  
                    type : "GET",  
                    url : "/getPeopleList?page=" + pageIndex,  
                    async : false,  
                    dataType : "json", 
                    data:{},
                    success : function(data) {  
                        // 赋值total，用于计算  
                        ptotal = data.ptotal;  
                        //拼接html(这个部分根据自己的需求去实现)  
                        var list = data.pList;  
                        var html = '';
                        for (var i = 0; i < list.length; i++) {  
                            html += "<tr><td class='left aligned'>" + list[i].cname + "</td>" ;
                            html += "<td>" + list[i].hno +"-" +list[i].sno +"</td>";
                            html += "<td>" + list[i].recordtime +"</td>";
                            html += "<td>" + list[i].tname +"</td>";
                            html += "<td><a href='javascript:;'>编辑</td></tr>";
                        }  
                        $('.list').html(html) ;
                    },  
                    error : function(data) {  
                        alert("请求超时，请重试！");  
                    }  
                });  
    };  
});
</script>
</html>
